<template>
  <Card :title="t('routes.dashboard.workplaceSetting.notice')" v-bind="$attrs">
    <template #extra>
      <a-button type="link" size="small">{{ t('routes.dashboard.more') }}</a-button>
    </template>
    <div>
      <div v-for="(item, idx) in list" :key="idx" class="item">
        <a-tag :color="item.type" size="small">{{ item.label }}</a-tag>
        <span class="item-content">
          {{ item.content }}
        </span>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const list = ref<any>([
    {
      type: 'orangered',
      label: '活动',
      content: '内容最新优惠活动',
    },
    {
      type: 'cyan',
      label: '消息',
      content: '新增内容尚未通过审核，详情请点击查看。',
    },
    {
      type: 'blue',
      label: '通知',
      content: '当前产品试用期即将结束，如需续费请点击查看。',
    },
    {
      type: 'blue',
      label: '通知',
      content: '1月新系统升级计划通知',
    },
    {
      type: 'cyan',
      label: '消息',
      content: '新增内容已经通过审核，详情请点击查看。',
    },
  ]);
</script>

<style scoped lang="less">
  .item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    margin-bottom: 4px;

    .item-content {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 4px;
      color: #4e5969;
      text-decoration: none;
      font-size: 13px;
      cursor: pointer;
    }
  }
</style>
